<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;">

    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>

    </template>
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-form-model-item label="用户账号" prop="username">
          <a-input placeholder="请输入用户账号" v-model.trim="form.username" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item label="用户姓名" prop="nickname">
          <a-input placeholder="请输入用户姓名" v-model.trim="form.nickname" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item label="邮箱" prop="email">
          <a-input placeholder="请输入邮箱" v-model.trim="form.email" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item label="简介">
          <a-textarea placeholder="请输入简介" v-model.trim="form.introduction" :disabled="disableSubmit"/>
        </a-form-model-item>
        <a-form-model-item
          label="是否管理员"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.administrator" button-style="solid">
            <a-radio-button :value="true">是</a-radio-button>
            <a-radio-button :value="false">否</a-radio-button>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="头像">
          <z-image-upload v-model.trim="form.avatar"></z-image-upload>
        </a-form-model-item>
        <!-- <a-form-model-item
          label="是否有效"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.accountNonExpired">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="是否可用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.accountNonLocked">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="凭证可用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-model="form.credentialsNonExpired">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-model-item> -->
      </a-form-model>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
import pick from 'lodash.pick'
import { postAction, putAction } from '@/services/manage'
import ZImageUpload from '@/components/zz/ZImageUpload'
export default {
  name: 'UserModal',
  components: {
    ZImageUpload
  },
  data() {
    return {
      modalWidth: 800,
      drawerWidth: 700,
      modaltoggleFlag: true,
      disableSubmit: false,
      validatorRules: {
        username: [{
          required: true, message: '请输入用户账号!'
        }
        // {
        //   validator: this.validateUsername
        // }
        ],
        nickname: [{
          required: true,
          message: '请输入姓名'
        }],
        email: [
          { type: 'email', message: '请输入正确的邮箱格式!' }
          // {required: true,message: '请输入邮箱'},
        ]
      },
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: {},
      url: {
        add: '/user/add',
        edit: '/user/edit'
      }
    }
  },
  methods: {
    // 窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 800
      }
      this.modaltoggleFlag = !this.modaltoggleFlag
    },
    add() {
      this.edit({
        administrator: false
        // accountNonExpired: true,
        // accountNonLocked: true,
        // credentialsNonExpired: true
      })
    },
    edit(record) {
      this.resetScreenSize() // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.visible = true
      this.model = Object.assign({}, record)
      this.$nextTick(() => {
        this.form = pick(this.model, 'username', 'nickname', 'email', 'introduction', 'administrator', 'avatar')
      })
    },
    close() {
      this.$emit('close')
      // this.form.resetFields()
      this.$refs.ruleForm.resetFields()
      this.visible = false
      this.disableSubmit = false
    },
    handleSubmit() {
      // 触发表单验证
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const formData = Object.assign(this.model, this.form)
          this.updateData(formData)
        }
      })
    },
    handleCancel() {
      this.close()
    },
    updateData(formData) {
      this.confirmLoading = true
      if (formData.id) {
        putAction(this.url.edit, formData).then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.close()
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        postAction(this.url.add, formData).then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('ok')
            this.close()
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      }
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      const screenWidth = document.body.clientWidth
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 700
      }
    }
  }
}
</script>

<style scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
